<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { getRootUser,getpageData,deleteRootUser,istoken } from "../../../api/api";
import {  Upload } from '@element-plus/icons-vue'
import addData from "./upData/addData.vue";
const data = ref()
const user = ref('')
const page = ref<number>(0)
const thisPage = ref<number>(0)
const password = ref('')
const centerDialogVisible = ref(false)
// 初始化
onMounted(async()=>{
    is()
    const res = await getRootUser()
    page.value = res.data.msg
    data.value = res.data.data
})
//判断登录
const is = async () => {
    const res = await istoken()
    if (res.data.code !== '200') {
        // 从localStorage中删除名为'token'的项
        localStorage.removeItem('token');
        localStorage.removeItem('mail');
    }
}
//删除管理员数据
const DeleteRoot = async(row: {_id:string}) => {
    const res = await deleteRootUser({_id:row._id,thisPage:thisPage.value})
    data.value = res.data.data
    page.value = res.data.msg
}
//关闭弹窗
const inFO = (e: boolean) => {
    centerDialogVisible.value = e;
}
//更新数据
const getNewData = (e:{data:{},msg:number,code:string}) => {
    if(e.code !== '404') {
        data.value = e.data
        page.value = e.msg
    }
}
//获取分页
const getPage = async(e:number) => {
    thisPage.value = e
    const res = await getpageData({thisPage:e})
    data.value = res.data.data
}
</script>

<template>
    <!-- 添加按钮 -->
    <addData 
    :user 
    :password 
    :thisPage
    title="添加管理员"  
    :centerDialogVisible 
    @update:centerDialogVisible="inFO"
    @update:newData="getNewData"
    >
        <el-form label-width="auto">
            <el-form-item label="账号：">
                <el-input v-model="user" placeholder="管理员账号" />
            </el-form-item>
            <el-form-item label="密码：">
                <el-input v-model="password" type="password" placeholder="管理员密码" show-password />
            </el-form-item>
        </el-form>
    </addData>
    <!--  -->
    <div class="data">
        <div class="input">
            <el-button type="primary" :icon="Upload"
                @click="centerDialogVisible = !centerDialogVisible">添加管理员</el-button>
        </div>
        <el-table :data="data" border style="width: 100%">
            <el-table-column label="_id" prop="_id" />
            <el-table-column label="管理员账号" prop="user" />
            <el-table-column label="密码" prop="password" />
            <el-table-column align="left" label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="DeleteRoot( scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination 
            class="pageTop"
             background 
             @change="getPage"
             layout="prev, pager, next" 
             :total="page" />
        </div>
    </div>
</template>

<style scoped>
.data {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-rows: 6% 90% 5%;
}

.page {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>